<template>
	<view class="cinema-group-style">
		<view class="cinema-info-group" v-if="list.length > 0">
			<cinema-item v-for="(item, index) in list" :key="index" :item="item" @click="handleClick"></cinema-item>
		</view>
		<view class="cinema_group-layout" v-if="list.length <= 0 && !loadingShow">
			<view class="layout-item" v-for="i in 10">
				<view class="item1">
					<view class="item1-left"></view>
					<view class="item1-right"></view>
				</view>
				<view class="item2"></view>
				<view class="item3">
					<view class="item3-left"></view>
					<view class="item3-right"></view>
				</view>
			</view>
		</view>
		<view class="none-cinema-box" v-if="list.length <= 0 && loadingShow">
			<image src="@/static/img/other/no-img.png" mode="widthFix"></image>
			<view>无搜索结果，换家影院吧~</view>
		</view>
	</view>
</template>

<script>
	import cinemaItem from '@/pages/components/cinema/cinema-item.vue'
	export default {
		data() {
			return {

			}
		},
		components: {
			cinemaItem
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			loadingShow:{
				type: Boolean,
				default:true,
			}
		},
		methods: {
			handleClick(item) {
				this.$emit('click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cinema-group-style {
		.none-cinema-box {
			image {
				margin-top: 150rpx;
				width: 100%;
			}
		
			view {
				text-align: center;
				margin-top: 40rpx;
				font-size: 32rpx;
				color: #666;
			}
		}
	}
	.cinema_group-layout {
		.layout-item {
			height: 192rpx;
			padding: 20rpx 0 22rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item1-left {
					width: 236rpx;
					height: 40rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.item1-right {
					width: 104rpx;
					height: 40rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}
			.item2 {
				width: 456rpx;
				height: 28rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
			}
			.item3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item3-left {
					width: 456rpx;
					height: 28rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
				.item3-right {
					width: 146rpx;
					height: 28rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>
